<!--2018/12/24 0:01. by soft-->
<#assign title='用户管理'>
<#include '../header.ftl'>
<style>
  .layui-btn+.layui-btn {
    margin-left: 1px;
  }
  .cover {
    box-shadow: 0 0 3px 0 gray;
    margin: 8px 5px;
    border-radius: 5px;
  }
  .cover > img {
    border-radius: 5px;
  }
</style>
<#--弹框区-->
<div style="display: none; padding: 15px 30px 10px 0;" id="adjust-box">
  <form class="layui-form" lay-filter="ddl-form">
    <div class="layui-col-lg6 layui-col-sm6 layui-col-xs12">
      <div class="layui-form-item">
        <label class="layui-form-label">所属学院</label>
        <div class="layui-input-block">
          <select id="collage" name="collageId" lay-filter="collageF" lay-verify="required">
            <option>默认</option>
          </select>
        </div>
      </div>
    </div>
    <div class="layui-col-lg6 layui-col-sm6 layui-col-xs12">
      <div class="layui-form-item">
        <label class="layui-form-label">所属部门</label>
        <div class="layui-input-block">
          <select id="dept" name="deptId" lay-verify="required">
            <option>默认</option>
          </select>
        </div>
      </div>
    </div>
    <div class="layui-col-lg6 layui-col-sm6 layui-col-xs12">
      <div class="layui-form-item">
        <label class="layui-form-label">用户角色</label>
        <div class="layui-input-block" >
          <select id="role" name="roleId" lay-verify="required">
            <option value="1">普通教师</option>
          </select>
        </div>
      </div>
    </div>

    <div class="layui-col-lg6 layui-col-sm6 layui-col-xs12">
      <div class="layui-form-item">
        <label class="layui-form-label">任职日期</label>
        <div class="layui-input-block">
          <input id="nDatetime" name="ntime" lay-verType="tips" lay-verify="required" class="layui-input">
        </div>
      </div>
    </div>

    <div class="layui-col-lg6 layui-col-sm6 layui-col-xs12">
      <div class="layui-form-item">
        <label class="layui-form-label">现任职位</label>
        <div class="layui-input-block">
          <select id="duty" name="dutyId" lay-filter="dutyF" lay-verify="required">
            <option>教授</option>
          </select>
        </div>
      </div>
    </div>
    <div class="layui-col-lg6 layui-col-sm6 layui-col-xs12">
      <div class="layui-form-item">
        <label class="layui-form-label">职位等级</label>
        <div class="layui-input-block">
          <select id="dutyLevel" name="dutyLevel" lay-verify="required">
            <option>一级</option>
          </select>
        </div>
      </div>
    </div>

    <div class="layui-col-sm-offset6 layui-col-lg6 layui-col-sm6 layui-col-xs12">
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn layui-btn-fluid" lay-submit>确定调动</button>
        </div>
      </div>
    </div>
  </form>
</div>
<#--主区-->
<div class="users">
  <div class="layui-card">
    <div class="layui-card-header">
      <div class="pull-left">
      <@shiro.hasRole name="college-admin">
        <span class="layui-badge layui-bg-cyan">${_USER.college.name!'自己的学院'}</span>
      </@shiro.hasRole>
      </div>
      <#--搜索区-->
      <div class="text-right">
        <@shiro.hasRole name="admin">
          <select id="college-select" class="form-select">
            <option value="">所有学院</option>
            <#list colleges as college>
                <option value="${college.id}">${college.name}</option>
            </#list>
          </select>
        </@shiro.hasRole>
        <select id="dept-select" class="form-select">
          <option value="">所有部门</option>
            <#list depts as dept>
              <option value="${dept.id}">${dept.name}</option>
            </#list>
        </select>
        <select id="stype" name="stype" class="form-select">
          <option value="name">姓名</option>
          <option value="jobNum">工号</option>
        </select>

        <form id="usearch" style="display: inline-block;">
          <input type="text" class="form-input" placeholder="请输入姓名">
          <button type="submit" class="layui-btn layui-btn-sm">搜索</button>
        </form>
      </div>
    </div>

    <div class="layui-card-body">
      <table id="users-table"></table>
      <script type="text/html" id="sex">
        {{#  if(d.sex == 0) { }}
        <span class="layui-badge layui-bg-orange">无</span>
        {{#  } else if(d.sex == 1) { }}
        <span class="layui-badge layui-bg-green">男</span>
        {{#  } else { }}
        <span class="layui-badge">女</span>
        {{# } }}
      </script>  <#-- 性别模板 -->
      <script type="text/html" id="user-tool">
        <@shiro.hasRole name="admin">
          <a class="layui-btn layui-btn-xs" lay-event="adjust">调动</a>
        </@shiro.hasRole>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
      </script>

      <script type="text/html" id="cover-tool">
        <a lay-event="cover" href="javascript:" title="点击查看头像">{{d.name}}</a>
      </script>
    </div>
  </div>

  <script src="${root}/static/js/common.js"></script>
  <script>
    function colldept(d) {
      return (d.college.name || "默认")+"["+(d.department.name || "默认")+"]";
    }
    layui.use(['table', 'layer', 'jquery', 'form', 'laydate'], function () {
      var currentUser;
      var adjustId = 0, formIndex;
      var ddlInit = false;
      var $ = layui.$;
      var table = layui.table;
      var layer = layui.layer;
      var form = layui.form;
      var laydate = layui.laydate;

      table.render({
        elem: '#users-table',
        url: '${root}/user/page',
        method: 'post',
        page: true,
        cols: [[
          {title: '序号', type: 'numbers'},
          {title: '姓名', width: 75, toolbar: '#cover-tool'},
          {title: '性别', templet: '#sex', width: 60},
          {title: '角色', templet: '<span>{{d.role.name}}</span>'},
          {field: 'jobNum', title: '工号'},
          {field: 'tel', title: '电话'},
          {field: 'email', title: '邮箱'},
          {field: 'birthday', title: '出生年月'},
          {title: '学院/部门', templet: '<span>{{colldept(d)}}</span>'},
          {title: '职位/等级', templet: '<span>{{d.duty.name+"["+numToChinese(d.dutyLevel) + "级]"}}</span>'},
          {field: 'ntime', title: '任职日期'},
          {title: '操作', toolbar: '#user-tool', width: 105, unresize: true}
        ]],
        parseData: function (res) {
          return {
            code: 0,
            msg: res.message,
            count: (res.payload ? res.payload.totalElements : 0),
            data: (res.payload ? res.payload.content : 0)
          }
        }
      });

      // 部门、职位、职位等级设置
      var collage = $('#collage'),
          dept = $('#dept'),
          duty = $('#duty'),
          dutyLevel = $('#dutyLevel'),
          role = $('#role'),
          $nDatetime = $('#nDatetime');

      var methods = {
        del: function (user) {
          layer.confirm('确定删除用户<span style="color: #d25135;">['+user.name+']</span>吗？', {
            title: '提示',
            icon: 3
          }, function (i) {
            $.post('${root}/user/delete/' + user.id, function (data) {
              if (data.status === 200) {
                table.reload('users-table');
                layer.msg('删除成功！', {icon: 6, time: 1200});
                setTimeout(function () {
                  layer.close(i);
                }, 1250);
              } else {
                layer.alert('删除失败：' + data.message, {icon: 5});
              }
            });
          });
        },
        adjust: function (user) {
          currentUser = user;

          if (!ddlInit) {
            ddlInit = true;
            deptDutyLink($, layer, form, collage, user.collageId, dept, duty, dutyLevel, '${root}', function () {
              $.post('${root}/role/list', function (data) {
                if (data.status === 200) {
                  role.html(''); // 清空下拉框
                  var roles = data.payload;
                  for (var i = 0; i < roles.length; i++) {
                    var rl = roles[i];
                    var opt = '<option value="' + rl.id + '">' + rl.name + '</option>';
                    role.append(opt);
                  }
                  refresh();
                } else {
                  layer.alert('网络异常！', {
                    icon: 5
                  }, function (idx) {
                    layer.closeAll();
                  });
                }
              });
            });
          } else {
            refresh();
          }

          adjustId = user.id;
          formIndex = layer.open({
            type: 1,
            move: false,
            title: '用户调动 <span style="color: #009688;">['+user.name+']</span>',
            offset: '200px',
            area: ['560px', '270px'],
            content: $('#adjust-box')
          });

          function refresh() {
            collage.find('option[value='+user.collageId+']').prop('selected', true);
            dept.find('option[value='+user.deptId+']').prop('selected', true);
            duty.find('option[value='+user.dutyId+']').prop('selected', true);
            dutyLevel.find('option[value='+user.dutyLevel+']').prop('selected', true);
            role.find('option[value='+user.roleId+']').prop('selected', true);
            $nDatetime.val(user.ntime);
            form.render('select');
          }
        },
        cover: function (user) {
          layer.open({
            type: 1,
            offset: '150px',
            shadeClose: true,
            title: '<b class="layui-badge layui-bg-cyan">'+user.name+'</b>',
            content: '<div class="cover"><img src="'+user.cover+'" width="100%"></div>'
          })
        }
      };

      form.on('submit', function (obj) {
        var fd = obj.field;
        fd.id = adjustId;
        if (fd.dutyId === currentUser.dutyId) { // 职位没有改动则删除职位变动
          delete fd.dutyId;
        }
        if (fd.dutyLevel === currentUser.dutyLevel) { // 职位等级没有改动则删除职位变动
          delete fd.dutyLevel;
        }
        $.post('${root}/user/adjust', fd, function (data) {
          if (data.status === 200) {
            layer.msg('调动成功！', {icon: 6, time: 1200});
            layer.close(formIndex);
            table.reload('users-table');
          } else {
            layer.alert('调动失败！', {title: '错误', icon: 1}, function (o) {
              layer.close(o);
            });
          }
        });
        return false;
      });
      table.on('tool', function (o) {
        var mtd = methods[o.event];
        if (mtd != null) {
          mtd(o.data);
        }
      });

      // 搜索功能
      var $college = $('#college-select');
      var $deptSelect = $('#dept-select');
      var $stype = $('#stype');
      var $usearch = $('#usearch');
      var $inp = $usearch.find('input');
      var stype = 'name';

      $college.change(reloadUser);
      $deptSelect.change(reloadUser);

      //切换输入框内容格式
      $stype.change(function (e) {
        var opt = $(this).find('option:selected');
        stype = opt.val();
        $inp.attr('placeholder', "请输入" + opt.text());
        if (stype === 'name') {
          $inp.attr('type', 'text');
        } else {
          $inp.attr('type', 'number');
        }
      });
      $usearch.submit(function (e) {
        e.preventDefault();
        var where = getWhere();
        if (where.name != null && where.name.trim().length <= 0) {
          layer.msg('搜索名不能为空！', {time: 1200});
        } else if (where.jobNum != null && where.jobNum.length <= 3) {
          layer.msg('搜索工号不合法！', {time: 1200});
        } else {
          table.reload('users-table', {where: where});
        }
      });

      function reloadUser(e) {
        table.reload('users-table', {where: getWhere()});
      }

      function getWhere() {
        var collageId = $college.val();
        var deptId = $deptSelect.val();
        var val = $inp.val();
        var where = {collageId: collageId, deptId: deptId};
        where[stype] = val;
        return where;
      }

      // 联动学院和部门
      $college.change(function (e) {
        var cgid = e.target.value;
        $.post('${root}/dept/list', {cgid: cgid}, function (data) {
          $deptSelect.html('<option value="">所有部门</option>');
          if (data.status === 200) {
            layui.each(data.payload, function (index, val) {
              $deptSelect.append('<option value="'+val.id+'">'+val.name+'</option>');
            });
          } else {
            layer.alert('该学院不存在部门！');
          }
        });
      });

      laydate.render({
        elem: '#nDatetime', //指定元素
        value: new Date('2012-01-01'),
        theme: '#733784'
      });
    });
  </script>
</div>

<#include '../footer.ftl'>
